<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡通贪吃蛇</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="game-header">
      <h1>卡通贪吃蛇</h1>
      <div class="score-board">
        <div class="score">分数: <span id="score">0</span></div>
        <div class="high-score">最高分: <span id="high-score">0</span></div>
        <div class="level">级别: <span id="current-level">1</span></div>
      </div>
    </div>

    <div id="game-container">
      <div id="start-screen" class="screen active">
        <h2>选择难度级别</h2>
        <div class="level-selector">
          <div class="level-group">
            <button class="level-btn" data-level="1">1级</button>
            <button class="level-btn" data-level="2">2级</button>
            <button class="level-btn" data-level="3">3级</button>
            <button class="level-btn" data-level="4">4级</button>
            <button class="level-btn" data-level="5">5级</button>
          </div>
          <div class="level-group">
            <button class="level-btn" data-level="6">6级</button>
            <button class="level-btn" data-level="7">7级</button>
            <button class="level-btn" data-level="8">8级</button>
            <button class="level-btn" data-level="9">9级</button>
            <button class="level-btn" data-level="10">10级</button>
          </div>
          <div class="level-group">
            <button class="level-btn" data-level="11">11级</button>
            <button class="level-btn" data-level="12">12级</button>
            <button class="level-btn" data-level="13">13级</button>
            <button class="level-btn" data-level="14">14级</button>
            <button class="level-btn" data-level="15">15级</button>
          </div>
        </div>
        <p class="instructions">
          使用键盘方向键或WASD控制蛇的移动<br>
          级别越高，速度越快，挑战越大！
        </p>
        <button id="start-btn" class="action-btn">开始游戏</button>
      </div>

      <div id="game-screen" class="screen">
        <canvas id="game-canvas" width="400" height="400"></canvas>
        <div class="controls">
          <button id="pause-btn" class="action-btn">暂停</button>
          <button id="restart-btn" class="action-btn">重新开始</button>
        </div>
      </div>

      <div id="game-over-screen" class="screen">
        <h2>游戏结束!</h2>
        <div class="final-score">最终得分: <span id="final-score">0</span></div>
        <button id="play-again-btn" class="action-btn">再玩一次</button>
        <button id="change-level-btn" class="action-btn">更换级别</button>
      </div>
    </div>
  </div>

  <script src="game.js"></script>
</body>

</html>
